<template>
	<div ref="constainer" class="box" :style="height">
		<view class="LOGIN">English</view>
		<view class="img">
			<image src="@/static/LOGO.png"></image>
			<text>KOI云服务</text>
		</view>
		<van-form @submit="onSubmit">
			<van-cell-group inset>
				<van-field v-model="mobile" name="用户名" placeholder="请输入账号"
					:rules="[{ required: true, message: '请填写用户名' }]" />
				<van-field v-model="password" :type="pwd? 'password':'text'" name="密码" placeholder="请输入密码"
					@click-right-icon='Show' :rules="[{ required: true, message: '请填写密码' }]">
					<template #right-icon>
						<van-icon v-if="pwd" name="eye-o" color="#848496" size='20' />
						<van-icon v-else name="closed-eye" color="#848496" size='20' />
					</template>
				</van-field>
			</van-cell-group>
			<view class="more">
				<text @click="SignIn('忘记密码')">忘记密码?</text>
			</view>
			<view class="btn">
				<van-button round block type="primary" native-type="submit">
					登录
					<van-icon class="left" name="down" size='20' />
				</van-button>
				<view class="SignIn" @click="SignIn('注册')">未有账号？去 <text>注册</text></view>
			</view>
		</van-form>
	</div>
</template>

<script lang="ts" setup>
	import { debounce } from '@/utils/debounce'
	import { Adaptive } from '@/utils/Adaptive'
	import { postLoginAPI } from '@/api/login'
	import { onMounted, ref } from 'vue'
	import { useStore } from 'vuex'
	const store = useStore()
	// 账号\手机号
	const mobile = ref<string>('');
	// const areacode = ref('')
	// 密码
	const password = ref<string>('');
	const result = ref()
	// 点击登录时的事件
	const onSubmit = debounce(async () => {
		console.log(11111)
		// 判断是否是电话号码注册还是邮箱注册
		if (mobile.value.length < 12) {
			store.state.sign.sourceType = 1
			result.value = {
				mobile: mobile.value,
				type: store.state.sign.type,
				areacode: '+86',
				password: password.value,
				sourceType: store.state.sign.sourceType
			}
		} else {
			store.state.sign.sourceType = 2
			result.value = {
				type: store.state.sign.type,
				email: mobile.value,
				password: password.value,
				sourceType: store.state.sign.sourceType
			}
		}
		//发送登入请求
		const res = await postLoginAPI(result.value)
		// 判断是否请求成功并且返回了token值
		try {
			if (res.data.access_token) {
				// 如果有值，就储存到本地存储
				uni.setStorage({
					key: 'token',
					data: res.data.access_token
				});
				// 并且跳转至首页
				await uni.switchTab({
					url: '/pages/index/index'
				})
			}
		} catch (e) {
			//TODO handle the exception
			console.error('没有token值，有可能是接口问题')
		}
	}, 300);
	const SignIn = (val : string) => {
		// 并且跳转至首页
		//  uni.switchTab({
		// 	url: '/pages/index/index'
		// })
		// var value = val==='signIn'? 'sing'
		uni.navigateTo({
			url: '/SignSubcontract/SignIn/index?type=' + val
		})
	}
	const pwd = ref<boolean>(true)
	const Show = () => {
		pwd.value = !pwd.value
	}
	const constainer = ref(null)
	const height = ref({ height: '100%' })
	onMounted(async () => {
		const { boxHeight, windowHeight } = Adaptive(constainer.value)
		if (boxHeight > windowHeight) {
			height.value = { height: '100%' }
		} else {
			height.value = { height: '100vh' }
		}
	})
</script>


<style lang="scss" scoped>
	::v-deep.van-field__error-message {
		display: none;
	}

	::v-deep.van-cell-group--inset {
		margin: 0;
		border-radius: 0;

		.van-cell {
			margin: 10px 0;
		}
	}

	::v-deep.van-cell-group {
		background: transparent;
	}

	.box {
		width: 100vw;
		position: relative;
		padding: 0 40px;
		box-sizing: border-box;

		.container {
			height: 100%;
			background-color: #121316;
		}

		.LOGIN {
			font-size: 32px;
			padding-top: 62px;
			box-sizing: border-box;
			margin-left: 40px;
			color: white;
		}

		.img {
			margin-top: 285px;
			margin-bottom: 131px;
			width: 100%;
			height: 250px;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;

			image {
				width: 204px;
				height: 164px;
			}

			text {
				font-size: 44px;
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				color: #FFFFFF;
				line-height: 62px;
				margin-top: 24px;
			}
		}

		.more {
			width: 100%;
			display: flex;
			justify-content: right;
			// height: 70px;
			text-decoration: underline;
			align-items: center;
			color: red;
			margin-bottom: 40px;

			&>:nth-child(1) {
				font-size: 24px;
			}
		}

		.van-form {
			margin-top: 126px;
			padding-bottom: 180px;
			box-sizing: border-box;

			.van-cell {
				height: 120px;
				background: #393759;
				opacity: 0.9;
				border-radius: 24px;
				border: 1px solid black;
				margin-bottom: 24px;
			}
		}

		.btn {
			margin-top: 20px;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;

			.SignIn {
				position: absolute;
				bottom: 84px;
				left: 50%;
				transform: translateX(-50%);
				font-size: 28px;
				color: white;

				text {
					color: #0aa997;
				}
			}

			.van-button--block {
				background-color: #00bfbf;
				height: 120px;
				font-size: 36px;
				background: linear-gradient(151deg, #06FFDD 0%, #4E47FF 100%);
				border-radius: 24px;

				.left {
					transform: translateY(-50%) rotate(-90deg);
					position: absolute;
					right: 44px;
					top: 50%;
					font-size: 24px;
				}
			}
		}
	}

	::v-deep.van-field__body {
		height: 96px;
		text-align: center;
		// input{
		// 	// height: 80px;
		// }

	}

	::v-deep.van-field__control {
		font-size: 32px;
		color: white;
		text-align: center;
	}

	::v-deep.van-field__right-icon {
		padding-right: 42px;
		color: #848496;
	}
</style>